<template>
  <view class="product-intro">
    <!-- 七个产品 下单之前产品简介-->
    <template v-if="item.product_name == '问一下'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image v-if="item.product_image&&item.serve_time!='15分钟'"  class="shiyibutie" src="@/static/img/shiyibutie.png" alt="加载错误" mode="widthFix"></image>
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
        <text class="tip-item">{{ item.serve_time }}</text>
      </view>
    </template>
    <template v-else-if="item.product_name == '陪同办'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.content }}</text>
        <text class="tip-item">{{ item.serve_time }}</text>
      </view>
    </template>
    <template v-if="item.product_name == '私人律师'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.grade }}私人律师</text>
        <text class="tip-item">{{ item.dead }}</text>
      </view>
    </template>
    <template v-if="item.product_name == '写合同'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item" v-if="item.documemt">{{
          item.documemt.toString()
        }}</text>
        <!-- <text class="tip-item">{{ item.docu_time }}</text> -->
        <text class="tip-item">1份</text>
      </view>
    </template>
    <template v-if="item.product_name == '审案子'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.area_name }}</text>
        <!-- <text class="tip-item">{{ item.serve_type }}</text> -->
        <!-- <text class="tip-item">{{ item.docu_time }}</text> -->
        <text class="tip-item">评估案件胜诉率/回款率</text>
      </view>
    </template>
    <template v-if="item.product_name == '打官司' && item.money_type == 26">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image && item.offer != '47'"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item" style="margin-right: 8rpx"
          >{{ item.area_name }}代理收款方
        </text>
        <text class="tip-item"> 您追款 我出钱 不回款 不收钱</text>
      </view>
    </template>
    <template v-if="item.product_name == '打官司' && item.money_type == 27">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image && item.offer != '47'"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.area_name }}代理</text>
        <text class="tip-item">{{ item.self_ident }}</text>
        <text class="tip-item">{{ item.stage }}</text>
      </view>
    </template>
    <template v-if="item.product_name == '刑事会见'">
      <view class="item-black" :class="index ? 'item-blacks' : ''">
        <image
          v-if="item.product_image"
          class="shiyibutie"
          src="@/static/img/shiyibutie.png"
          alt="加载错误"
          mode="widthFix"
        ></image>
        <text class="tip-item">{{ item.accusation }}</text>
        <text class="tip-item">会见1次</text>
      </view>
    </template>
    <!-- <view class="item-black">
      <text class="tip-item">
        (
        <template v-if="item.product_name == '打官司' && item.money_type == 26">
          广东广州
        </template>
        {{ item.serve_name }})
      </text>
    </view> -->
    <view class="item-label-small" :class="index ? 'item-labels' : ''">
      <view
        class="label-txt-small"
        :class="is_anzhuo ? 'label-txt-anzhuo-small' : ''"
        v-for="(item_child, index_child) in item.label"
        :key="index_child"
      >
        <view class="small" :class="is_anzhuo ? 'anzhuo-small' : ''">{{ item_child }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["item", "index"],
  data() {
    return {
      is_anzhuo: true,
    };
  },
  created() {
    const nav = navigator.userAgent;
    if (nav.indexOf("Android") > -1 || nav.indexOf("Adr") > -1) {
      this.is_anzhuo = true;
    } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      this.is_anzhuo = false;
    }
  },
  methods: {},
};
</script>

<style lang="scss">
.small {
  border: 1rpx solid #c6f2d4;
  white-space: nowrap;
  padding: 2rpx;
  float: left;
  margin-right: 10rpx;
  font-size: 28rpx;
}
.item-label-small {
  color: #66a773;

  .label-txt-small {
    width: 100vw;
    box-sizing: border-box;
    font-size: 28rpx;
    border-radius: 6rpx;
    margin-bottom: 10rpx;
    transform: scale(0.75) !important;
    transform-origin: 0 0;
  }
  .label-txt-anzhuo-small {
    font-size: 28rpx;
    transform: scale(0.7) !important;
    transform-origin: 0 0;
    .anzhuo-small{
      border: 1rpx solid #d8fae6;
    }
  }
}

.item-black {
  margin-bottom: 4rpx;
  .tip-item {
    vertical-align: middle;
    //font-size: 24rpx;
    font-weight: bold;
  }
}
.item-blacks {
  //margin-left: 16rpx;
}
.item-tip {
  //font-size: 24rpx;
  margin-bottom: 4rpx;
  .tip-item {
    color: #aaaaaa;
    font-size: 24rgpx;
    margin-right: 10rpx;
  }
}
.item-tip.text-ellipsis {
  color: #aaaaaa;
}
.item-label {
  display: flex;
  flex-wrap: wrap;
  color: #19c151;
  .label-txt {
    border: 1rpx solid #c6f2d4;
    border-radius: 6rpx;
    margin-bottom: 10rpx;
    padding: 4rpx;
    font-size: 10rpx;
    margin-right: 4rpx;
  }
  .label-txt-anzhuo {
    //font-size:  8px;
  }
}
 .item-labels {
   //margin-left: 16rpx;
 }
.product-intro {
  padding-top: 14rpx;
}
.shiyibutie {
  width: 90rpx;
  margin-right: 8rpx;
  vertical-align: middle;
}
</style>
